/// <reference path="references.scss" />

// RTL support (right to left)
// --------------------------------------------------

[dir=rtl] {
    
    // Text expander
    // -------------

    .more-less .btn-text-expander {
        direction: rtl; // enforce RTL, even with inline bidi overwrite
        /*justify-content: flex-end;
		> i { order: 1; }*/
    }

    .gal-item.slick-slide {
        // Don't swap direction in gallery. Doesn't synch with thumbs otherwise.
        float: left;
    }


    // Megamenu
    // -------

    .megamenu-dropdown-container.simple {
        .dropdown-menu.ar {
            transform: translateX(-($grid-gutter-width));
        }
    }


    // Rating
    // -------

    .rating,
    .rating > * {
        background-position-x: 100%;
    }


    // Search
    // ------

    .active-filter-item {
        float: right;
    }

    
    // Logo
    // ------
    .search-focused .shop-logo {
        transform: translateX(-100%);
    }


    // Checkout
    // ------

    .costep {
        &:first-child:after,
        &:last-child:before {
            display: none;
        }

        &:first-child:before,
        &:last-child:after {
            display: block;
        }
    }

    .costep.active {
        &:before {
            background-color: $costep-border;
        }

        &:after {
            background-color: $costep-active-border;
        }
    }


    // Category Menu
    // -------------

    .catmenu-path-item.expanded,
    .catmenu-item.parent {
        &:after {
            content: "\f053"; // chevron-left
        }
    }

    #offcanvas-menu {
        .menubar-link,
        .ocm-item {
            &.has-children:after {
                content: "\f104";
            }
        }

        .layer {
            transform: translateX(30%);

            &.show {
                transform: translateX(0);
            }

            &.show ~ .layer {
                transform: translateX(-100%);
            }
        }
    }

    &.wkit #offcanvas-menu .layer {
        // Workaround for Chrome in RTL mode: https://stackoverflow.com/questions/28928992/offcanvas-menu-not-working-with-direction-rtl
        // Reducing the transition duration from 300ms to 50ms seems to help, at least it is hard notice the glitch.
        // Completely turning off the transition suppresses the transitionEnd event, which we actually need.
        transition-duration: 0.05s;
    }

    // Product
    // -------


    #pd-gallery .gal {
        direction: ltr;
    }

    .drift-zoom-pane img {
        left: 0;
    }

    // Footer
    // -------

    .footer-social .btn-social {
        margin: 0 0.4rem;
    }
}
